<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      button {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <button message="后盾人">houdunren</button>
    <button message="hdcms">hdcms</button>

    <hr />

    <div desc="houdunren">在线学习</div>
    <div desc="hdcms">开源产品</div>
  </body>
</html>
<script>
  let btns = document.querySelectorAll("button");
  btns.forEach(function (item) {
    let bind = false; // setInterval只需要开启一次
    item.addEventListener("click", function () {
      if (!bind) {
        // 第一次是成功的
        let left = 1;
        // 返回了一个定时器的编号，就为true了，所以不会再开启定时器
        bind = setInterval(function () {
          item.style.left = left++ + "px";
        }, 100);
      }
    });
  });

  let divs = document.querySelectorAll("div");
  divs.forEach(function (item) {
    let desc = item.getAttribute("desc");
    // 先给他添加事件，再把item元素清空，减少内容占用
    item.addEventListener("click", function () {
      //   console.log(item.getAttribute("desc")); // 每次这样访问都要用到item，我们只是想访问到desc的值并不需要复杂的item
      console.log(desc);
      console.log(item); // null
    });
    item = null; // 清空了，这里是访问不到div的每个元素了
  });
</script>
